<template>
  <el-dialog title="默认协作者管理" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" width="1000px" append-to-body>
    <div class="group-right">
      <el-button type="primary" size="mini" @click="handleAddOrEdit('add')">新增</el-button>
    </div>

    <el-table :data="parentList"
              ref="allTableData"
              class="tableHightClass"
              :max-height="tableHeight"
    >
      <el-table-column :label="item.label"
                       align="center"
                       v-for="(item,index) in tableColumns"
                       :prop="item.key"
                       v-if="item.visible?item.visible:true"
                       :fixed="item.fixed?item.fixed:false"
      >
        <template slot-scope="scope">
          <div v-if="item.key=='statusType'">
            <el-switch v-model="scope.row[item.key]" @change="handleStatusChange(scope.row)"
            ></el-switch>
          </div>
          <div v-else-if="item.key=='status'" class="status">
            <span class="color-green" v-if="scope.row[item.key]==0">正常</span>
            <span class="color-red" v-if="scope.row[item.key]==1">停用</span>
          </div>
          <div v-else-if="item.key=='menuTypeName'">
            <el-tag type="success">{{ scope.row[item.key] }}</el-tag>
          </div>
          <div v-else style="display: inline-block">{{ scope.row[item.key] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
                       width="120">
        <template slot-scope="scope">
          <div class="group-btn">
            <el-tooltip content="编辑" placement="top" effect="light">
              <img src="@/assets/images/tableEdit.png" alt="" @click="handleAddOrEdit('edit',scope.row)">
            </el-tooltip>
          </div>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
    <addOrEditRole v-if="addOrEditRole" :visableIf.sync="addOrEditRole" :id="id" :dialogType="dialogType" @getList="getList"></addOrEditRole>
  </el-dialog>
</template>

<script>
import { reqRoleList, reqStatusOpenAlone, reqStatusStopAlone } from '@/api/coordinateMgt/index'

export default {
  name: 'roleList',
  components: {
    'addOrEditRole': () => import('./addOrEditRole')
  },
  data() {
    return {
      total: 8,// 表格的总条数
      dialogType: 'add',
      tableHeight: 300,
      addOrEditRole: false,
      id: null,//z角色id
      queryParams: {
        page: 1,
        num: 10
      },
      parentList: [],
      tableColumns: [
        { key: 'roleName', label: `角色名称` },
        { key: 'statusType', label: `开关状态` },
        { key: 'status', label: `状态` }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleAddOrEdit(type, row) {
      if (type == 'add') {
        this.id = null
        this.dialogType = 'add'
      } else {
        this.id = row.id//角色id
        this.dialogType = 'edit'
      }
      this.addOrEditRole = true
    },
    //审核的列表
    getList() {
      this.loading = true
      reqRoleList(this.queryParams).then(res => {
        this.parentList = res.data.list
        this.parentList.forEach(item => {
          item.statusType = item.status == 0 ? true : false
        })
        this.total = res.data.count
        this.loading = false
      })
    },
    /** 导出按钮操作 */
    handleExport() {

    },
    handleStatusChange(row) {
      console.log('状态', row.status)
      let text = row.status == false ? '暂停' : '启用'
      this.$modal.confirm(`确认要${text}角色（${row.roleName}）吗？`).then(function() {
        if (row.status == false) {
          return reqStatusStopAlone(row.id)
        } else {
          return reqStatusOpenAlone(row.id)
        }
      }).then(() => {
        this.$modal.msgSuccess(text + '成功')
        this.getList()
      }).catch(function() {
        row.status = row.status == 0 ? false : true
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: calc(100vh - 250px);
}

.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;

}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.status {
  span {
    position: relative;
    padding-left: 15px;

    &:after {
      position: absolute;
      left: 0px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      content: '';
      top: 50%;
      margin-top: -4.5px;
    }

    &.color-green:after {

      background: #00DD33;


    }

    &.color-red:after {
      background: #D10807;
    }
  }

}
</style>
